<template>
  <ul>
    <li v-for="(todo, index) in renderList" @click="toggleStatus(index)" :class="{ done: todo.isDone }" :key="index">
      {{ todo.title }}</li>
  </ul>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
interface Props {
  id: number,
  title: string,
  isDone: boolean
}
const props = defineProps<{
  renderList: Props[]
}>()

// const emit = defineEmits(['onToggleStatus'])
const emit = defineEmits<{(e: 'onToggleStatus', index: number): void }>()
const toggleStatus = (index: number) => {
  emit('onToggleStatus', index)
}
</script>

<style scoped>
.done {
  text-decoration: line-through;
}

li:hover {
  cursor: pointer;
}
</style>
